<div class="userlist-header">
  <h1>用户列表</h1>

  <div class="add-user-icon">
    <nz-tooltip [nzTitle]="'添加用户'" [nzPlacement]="'bottom'">
      <span nz-tooltip class="action-icon" (click)="showNewUserModal()"><i class="anticon anticon-user-add"></i></span>
      </nz-tooltip>
  </div>
</div>

<div class="users-list">
  <div *ngIf="users && users.length !== 0">
    <nz-table #nzTable [nzDataSource]="users" [nzPageSize]="6" nzShowSizeChanger >
      <thead nz-thead>
        <tr>
          <th nz-th><span>Username</span></th>
          <th nz-th><span>Realname</span></th>
          <th nz-th><span>Email</span></th>
          <th nz-th><span>Action</span></th>
        </tr>
      </thead>
  
      <tbody nz-tbody>
        <tr nz-tbody-tr *ngFor="let data of nzTable.data">
          <td nz-td>{{ data.username }}</td>
          <td nz-td>{{ data.realname }}</td>
          <td nz-td>{{ data.email }}</td>
          <td nz-td>
            <nz-tooltip [nzTitle]="'修改用户'" [nzPlacement]="'bottom'">
              <span nz-tooltip class="action-icon" (click)="showEditUserModal(data)"><i class="anticon anticon-edit"></i></span>
            </nz-tooltip>
            <nz-tooltip [nzTitle]="'修改密码'" [nzPlacement]="'bottom'">
              <span nz-tooltip class="action-icon" (click)="showChangePwModal(data)"><i class="anticon anticon-lock"></i></span>
            </nz-tooltip>
            <nz-tooltip [nzTitle]="'删除用户'" [nzPlacement]="'bottom'">
              <span nz-tooltip class="action-icon" (click)="showDeleteConfirm(data)"><i class="anticon anticon-delete"></i></span>
            </nz-tooltip>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </div>
</div>
